<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js">
    </script>
</head>
<body>
<!--
    v-for指令:
        1.用于展示列表数据
        2.语法: v-for="(item, index) in xxx”:key="yyy"
        3.可遍历: 数组、对象、字符串 (用的很少)、指定次数 (用的很少)
-->
<!--准备容器-->
<div id="root">
    <h2>人员列表(遍历数组)</h2>
    <ul>
        <li v-for="p in persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
    <h2>汽车信息(遍历对象)</h2>
    <!--遍历对象-->
    <ul>
        <li v-for="(value,key) in car" :key="key">
            {{value}}-{{key}}
        </li>
    </ul>
    <h2>遍历字符串(用得少)</h2>
    <!--遍历字符串-->
    <ul>
        <li v-for="(char,index) in str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>
    <h2>遍历次数(也用得少)</h2>
    <!--遍历次数-->
    <ul>
        <li v-for="(number,index) of 5" :key="index">
            {{number}}-{{index}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;


    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ],
            car:{
                name:'Audi',
                price:1000000
            },
            str:"ashj"
        }
    })
</script>
</body>
</html>